<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3240430_uycbnih1rxq.css">
    <link rel="stylesheet" href="./css/player.css">
</head>

<body>
    <div class="player">
        <audio src=""></audio>
        <main>
            <div class="filter"></div>
            <section class="music-player__disc">
                <img src="" alt="">
            </section>
            <section class="music-player__pointer">
                <img src="https://demo.lanrenzhijia.com/demo/68/6840/demo/images/cd_tou.png" alt="">
            </section>
            <section class="music-player__controls">
                <div class="music__info">
                    <h3 class="music__info--title"></h3>
                    <p class="music__info--singer"></p>
                </div>
                <div class="play_control">
                    <div class="control">
                        <div class="btn">
                            <i class="iconfont icon-previous"></i>
                            <i class="iconfont icon-play"></i>
                            <i class="iconfont icon-next"></i>
                            <i class="iconfont icon-loop-all"></i>
                        </div>
                        <div class="volume">
                            <i class="iconfont icon-yinliang"></i>
                            <div class="total_volume">
                                <div class="bark">
                                    <p></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="progress_bar">
                        <div class="curent"></div>
                    </div>
                    <div class="play_time">
                        <span>00:00</span>
                        <span>00:00</span>
                    </div>
                </div>
            </section>
        </main>
        <!-- 歌单列表 -->
        <ul class="menu">
        </ul>
    </div>
    <div class="lyrics"></div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./songData.js"></script>
    <script>
        // $('.lyrics').html(lyricsStr)
        // 默认当前播放歌曲索引
        var index = 0;
        // 默认音量大小
        var prevVolum = 50;
        setVolume()
        // 列表最后一首歌索引
        var max = songData.length - 1
        // 默认顺序播放
        var flag = false
        // 定义三种模式,并且存储到数组里  列表循环?单曲循环?随机播放?
        var model = ['iconfont icon-loop-all', 'iconfont icon-danquxunhuan', 'iconfont icon-suiji'];
        // 默认为列表循环模式
        var modexIndex = 0;
        var modelLen = model.length

        // 初始化歌单
        function updateMenu(array = songData) {
            let str = ``
            array.forEach(function (obj,i) {
                // <i class="iconfont"></i>
                str += `<li>
                            <i class="${i==index?'iconfont icon-yinliang':''}"></i>
                            <div class="song active">${obj.title}</div>
                        </li>`
            })
            $('.menu').html(str);
        }
        
        updateMenu()
        // 给所有绑定点击事件的按钮封装一个函数
        function click(className, fun) {
            let btn = $(className);
            btn[0].onclick = fun
        }
        function change(array = songData) {
            $('.music__info--title').html('' + array[index].title)
            $('.music__info--singer').html('' + array[index].siner)
            $('title').html(array[index].title + '-' + array[index].siner)
            $('.music-player__disc img').attr('src', array[index].sinerPic)
            $('link').eq(0).attr('href', array[index].sinerPic)
            $('.filter').css('background', 'url(' + array[index].sinerPic + ')')
            $('audio').attr('src', array[index].songSrc);
            $('li').find('div').removeClass('active');
            $('li div').eq(index).addClass('active');
            $('.curent').css('width', 0)
        }
        // 默认播放第一首歌
        change();
      
        function playControl() {
            $('audio')[0].play()
            $('.btn>i:nth-of-type(2)').removeClass('icon-play').addClass('icon-zanting');
            $('main').addClass('playing');
            updateMenu()
        }
        function pauseControl() {
            $('audio')[0].pause()
            $('.btn>i:nth-of-type(2)').addClass('icon-play').removeClass('icon-zanting');
            $('main').removeClass('playing')
            updateMenu()
        }

        function randomPlay() {
            // 随机播放
            let prev = index;
            index = Math.floor(Math.random() * 5);
            while (index == prev) {
                index = Math.floor(Math.random() * 5);
            }
        }

        function autoPlay(flag) {
            // 列表循环或随机播放
            flag ? randomPlay() : index = index >= max ? 0 : index + 1;
            change();
            playControl();
        }


        function changeVolume(i) {
            $('.volume>i').removeAttr('class')
            if ($('audio')[0].volume == 0) {
                $('.volume>i').attr('class', 'iconfont icon-yinliang')
                prevVolum > 0 ? setVolume(prevVolum) : setVolume(20)
            } else {
                if (i == 0) {
                    $('.volume>i').attr('class', 'iconfont icon-jingyin')
                } else {
                    $('.volume>i').attr('class', 'iconfont icon-yinliang')
                }
                setVolume(i)
            }
        }

        function setVolume(bfb = 50) {
            $('.bark').css('width', bfb + '%');
            $('audio')[0].volume = bfb / 100
        }

        //转换时间
        function setTime(x, times) {
            if (times < 10) {
                x.html("0:0" + Math.floor(times))
            } else if (times < 60) {
                x.html("0:" + Math.floor(times))
            } else {
                let minute = parseInt(times / 60);
                let second = times - minute * 60;
                if (second < 10) {
                    x.html("0" + minute + ":" + "0" + parseInt(second))
                }
                else {
                    x.html("0" + minute + ":" + parseInt(second))
                }
            }
        }

        // 点击事件
        // 用事件委托将多个点击事件绑定到共同的祖先节点
        var el = document.body
        el.addEventListener('click', (e) => {
            let target = e.target;
            let i = $(target).parent().index();
            switch (target) {
                // 播放
                case $('.icon-play')[0]:
                    playControl()
                    break;
                // 暂停
                case $('.icon-zanting')[0]:
                    pauseControl()
                    break;
                // 上一首
                case $('.icon-previous')[0]:
                    flag ? randomPlay() : index = index <= 0 ? max : index - 1;
                    change();
                    playControl();
                    break;
                // 下一首
                case $('.icon-next')[0]:
                    flag ? randomPlay() : index = index >= max ? 0 : index + 1;
                    change();
                    playControl();
                    break;
                // 模式切换
                case $('.btn i:last-of-type')[0]:
                    $('audio')[0].loop = "";
                    flag = false;
                    modexIndex = modexIndex >= modelLen - 1 ? 0 : modexIndex + 1;
                    $('.btn i:last-of-type').removeAttr('class');
                    $('.btn i:last-of-type').attr('class', model[modexIndex]);
                    if (modexIndex == 0) {
                    } else if (modexIndex == 1) {
                        $('audio')[0].loop = "loop";
                    } else {
                        flag = true;
                    }
                    break;
                // 静音
                case $('.volume i')[0]:
                    changeVolume(0);
                    break;
                // 歌单列表点击切换歌曲
                case $('.menu div')[i]:
                    index = i
                    change();
                    playControl();
                    break;
            }
        })
        //音量进度条拖动
        click('.total_volume', function (event) {
            let x = event.offsetX;//获取鼠标所在位置
            let y = $('.total_volume').width()
            let bfb = x / y * 100;
            prevVolum = bfb
            changeVolume(bfb)
        });

        //歌曲进度条拖动
        click('.progress_bar', function (event) {
            let x = event.offsetX;//获取鼠标所在位置
            let y = $('.progress_bar').width()
            let bfb = x / y * 100;//进度条设置的宽度为400px
            // gequjd.style.width = bfb + "%";
            $('.curent').css('width', bfb + "%")
            $('audio')[0].currentTime = $('audio')[0].duration * +bfb / 100;
        });

        //歌曲事件
        //歌曲数据加载，显示总时长
        $('audio')[0].addEventListener("loadedmetadata", function () {
            let times = this.duration;
            setTime($('.play_time span').eq(1), times);
        });

        //时间更新事件，歌曲顺利播放的时候，更新进度条和当前播放的时间
        $('audio')[0].addEventListener("timeupdate", function (event) {
            let jd = this.currentTime / this.duration;//当前时间占总时长的百分比
            let bfb = jd * 100 + "%";//转化为百分数，方便后面进度条的宽度初始化(宽度一般可以用百分比表示)
            $('.curent').css('width', bfb)
            let times = this.currentTime;
            setTime($('.play_time span').eq(0), times);
        });
        $('audio')[0].addEventListener('ended', () => {
            autoPlay(flag);
        })
    </script>
</body>
</html>